<?php @session_start();?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业完成情况统计</title>
    <link rel=stylesheet href='../common-static/modal-dlg.css' type='text/css'>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <?php
        require_once("./admin-header.php");
    ?>
</head>
<body>
<center><h2>作业完成情况统计</h2></center>
<div id="homework_list">
    <zz-modal-component
            v-if="addUserIdData.isShow"
            modal-title='添加用户名'
            modal-style='width:250px'
            ok-btn="确认"
            cancel-btn="取消"
            @on-ok="okAddUserId"
            @on-cancel="cancelAddUserId"
    >
        <div slot="modal-content">
            <input type="text" v-model="addUserIdData.userId"/>
        </div>
    </zz-modal-component>

    <form class=center @submit.prevent="searchHomework">
        <input style="height:30px;" readonly="readonly"  v-on:click="AddUserId()" v-bind:value="userIdsStr()"  placeholder="点此添加用户ID">
        <input type="button" v-on:click="AddUserId()" value="添加用户ID">
    </form>
</div>
<script src="../common-static/modal-component.js"></script>
<script>
    new Vue({
        el: "#homework_list",
        data: {
            addUserIdData: {isShow:false, userId:''},
        },
        methods: {
            // 搜索课后作业
            searchHomeWork:function() {
                /*
                let param="op=search"+"&keyword=" + this.keyWord + "&zzstatus="+this.zzStatus;
                $.ajax({
                    type:'get',
                    url:'service/user_service.php',
                    data:param,
                    dataType:'json',
                    success:function (jsonData) {
                        app.users = jsonData.data;
                    }
                });*/
            },

            AddUserId:function() {
                this.addUserIdData.isShow = true;
            },

            userIdsStr:function () {
                return 'hello';
            },

            okAddUserId () {
                this.addUserIdData.isShow = false;
                alert(this.addUserIdData.userId);
            },
            cancelAddUserId () {
                this.addUserIdData.isShow = false;
            }
        }
    })
</script>
</body>
</html>